<template>
<div class="content">
  <ul
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
    :infinite-scroll-immediate-check="true">
    <li v-for="item in list" :key="item.index">{{ item }}</li>
  </ul>
  <p class="page-infinite-loading" ref="spinner">
      <mt-spinner type="fading-circle" color="#23ab1b" class="spinner"></mt-spinner>
      加载中...
  </p>
</div>
</template>

<script>
export default {
  data () {
    return {
      list: [1,2,3,4,5,1,2,3,4,5,1,2,3,4,51,2,3,4,51,2,3,4,51,2,3,4,51,2,3,4,5],
      isScoll: true
    }
  },
  mounted () {
    this.$refs.spinner.style.display = 'none'
  },
  methods: {
    loadMore() {
      if (this.isScoll === true) {
        this.$refs.spinner.style.display = 'block'
        this.loading = true
        setTimeout(() => {
          let last = this.list[this.list.length - 1]
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i)
          }
          this.loading = false
        }, 2500)
      }
      // this.$refs.spinner.style.display = 'block'
    }
  }
}
</script>

<style lang="scss">
.page-infinite-loading {
  text-align: center;
  line-height: 37px;
  .spinner {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
  }
}
</style>
